<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('主板详细')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <script th:src="@{/js/plugins/echarts/echarts.min.js}"></script>

    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>
</head>

<div class="form-group">
    <label class="col-sm-2 control-label">股票走势图：</label>
</div>
<div id="main" style="width: 1300px; height: 400px;"></div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var id = 106;
    // 发送AJAX请求到后端API获取数据
    // console.log(mainId+11);
    const mainId = [[${mainId}]];
    const formData = new FormData();
    formData.append('mainId', mainId);
    fetch('/system/main/board/one/allStockMainBoardDetail', {
        method: 'POST',
        body: formData
    }).then(response => response.json())
        .then(data => {
            // 处理数据并更新图表
            var option = {
                title: {
                    // text: getTitle(data), // 初始化时调用函数设置标题
                    text: data[0] ? data[0].stockName : '默认标题', // 初始化时调用函数设置标题.get
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: data.map(item => item.day)
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data.map(item => item.stockPrice),
                    type: 'line',
                    smooth: 0,
                    label: {
                        show: true, // 显示标签
                        position: 'top', // 标签位置
                        formatter: function (params) {
                            return params.value; // 显示数值
                        }
                    }
                }]
            };
            myChart.setOption(option);
        })
        .catch(error => console.error('Error loading the data:', error));
</script>
</form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "demo/operate";

    $("#form-user-add").validate({
        onkeyup: false,
        rules: {
            userPhone: {
                isPhone: true
            },
            userEmail: {
                email: true
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
        }
    }
</script>

</body>
</html>
